<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>tab切换改良版</title>
	<style>
	span{
		display: inline-block;
		width: 45px;
		height: 16px;
		background-color: gray;
		color: red;
		text-align: center;
	}
	div{
		width: 200px;
		height: 200px;
		background-color: yellow;
		color: red;
	    font-size: 20px;
	}
	.hide{
		display: none;
	}
	.green_span{
		background-color: green;
	}
	</style>
</head>
<body>
<span class="btn green_span">one</span>
<span class="btn">two</span>
<span class="btn">three</span>
<span class="btn">four</span>
<div class="show ">第一块</div>
<div class="show hide">第二块</div>
<div class="show hide">第三块</div>
<div class="show hide">第四块</div>
	
</body>

<script>
	//获取元素
	var btnArr = document.getElementsByClassName('btn');
	var showArr = document.getElementsByClassName('show');
	for(var i=0; i<btnArr.length; i++){
		(function  (i) {
			btnArr[i].onclick = function  () {
				for(var j=0;j<btnArr.length;j++){
				btnArr[j].style.backgroundColor='gray';
				showArr[j].style.display='none';
			}
			btnArr[i].style.backgroundColor='green';
			showArr[i].style.display='block';
				}			
		})(i);
		}





</script>














</html>